#chat{
    max-width:500px;
    height:500px;
    margin:0 auto;
    padding:5%;
    background-color: white;
    border:1px solid black;
    font-family: "Arial";
}

#chat .receive,#chat .sent{
    display:flex;
    width:100%;
    height:auto;
    min-height: 60px;
    margin-bottom: 30px;
}

#chat .receive{
    justify-content: flex-start;
}

#chat .sent{
    justify-content: flex-end;
}

#chat .bubble{
    max-width: 70%;
    padding: 2% 2%;
    border-radius: 8px;
    position: relative;
    line-height: 1.4;
}

#chat .receive .bubble{
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #e5e5e5;
    margin-left: 3%;
}

#chat .sent .bubble {
  background: #12b7f5;
  color: #fff;
  margin-right: 2%;
  background: linear-gradient(to right, #12b7f5, #1c92ff);
}

#chat .picture{
    width:50px;
    height:50px;
    min-width: 50px;
    border-radius: 50%;
    background:#ddd;
}

#chat .receive .picture{
    align-self:flex-start;
}

#chat .sent .picture {
    order:1;
    background-color: #ddd;
}

.time {
    font-size: 11px;
    margin-top: 5px;
    text-align: right;
}